<!-- eslint-disable vue/valid-define-props -->
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
const kuan = defineProps(['min', 'max', 'w']);
const { min, max, w } = kuan;
// 样式
const search = ref();
onMounted(() => {
    if (min && max && w) {
        search.value.style.width = w + '%';
        search.value.style.minWidth = min + 'px';
        search.value.style.maxWidth = max + 'px';
    }

});
// 数据
const down = ref([
    {
        id: 1,
        title: '全部'
    },
    {
        id: 2,
        title: 'H5'
    },
    {
        id: 3,
        title: '海报'
    },
    {
        id: 4,
        title: '长页'
    },
    {
        id: 5,
        title: '表单'
    },
    {
        id: 6,
        title: '互动'
    },
    {
        id: 7,
        title: '电子画册'
    },
    {
        id: 8,
        title: '视频'
    },
    {
        id: 9,
        title: '解决方案'
    }
]);
const active = ref(1);
const actValue = ref('全部');
const dowData = (id: number) => {
    active.value = id;
    const item = down.value.find((t: any) => t.id == id);
    if (item) {
        actValue.value = item?.title;
    }
};

const inp = ref();
const oneSearch = ref('邀请函');
const TopSearch = ref([
    {
        id: 1,
        title: '邀请函'
    },
    {
        id: 2,
        title: 'h5'
    },
    {
        id: 3,
        title: '婚礼邀请函'
    },
    {
        id: 4,
        title: '学校元旦放假通知'
    },
    {
        id: 5,
        title: '寿宴'
    },
    {
        id: 6,
        title: '抽奖'
    },

    {
        id: 7,
        title: '个人简历'
    },
    {
        id: 8,
        title: '优惠券'
    },
    {
        id: 9,
        title: 'christmas'
    },
    {
        id: 10,
        title: '招聘'
    }
]);
const i = ref(0);
setInterval(() => {
    // inp.value.className = 'inp b';
    if (i.value >= TopSearch.value.length) {
        i.value = 0;
    } else {
        // inp.value.className = 'inp a';
        oneSearch.value = TopSearch.value[i.value].title;
        i.value++;

    }
}, 5000);
</script>

<template>
    <div ref="search" class="search">
        <div class="dropdown">
            <div style="font-weight: bold;"> {{ actValue }}</div>
            <el-icon class="icon" size="12" style="margin: 0 15px;">
                <ArrowDown color="#666666" />
            </el-icon>
            <div class="shu"></div>
            <ul class="down">
                <li v-for="(item) in down" :key="item.id" @click="dowData(item.id)"
                    :style="{ color: active === item.id ? '#1f6afe' : '', fontWeight: active === item.id ? 'bold' : '400' }">
                    {{
                        item.title }}
                </li>
            </ul>
        </div>
        <input class="inp a" type="text" :placeholder="oneSearch" ref="inp">
        <el-button type="primary" class="but">
            <el-icon :size="20">
                <Search />
            </el-icon>
        </el-button>
    </div>
    <!-- <div class="element">{{ oneSearch }}</div> -->
</template>
  
<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.search {
    min-width: 350px;
    height: 40px;
    border: 1px solid #1261ff;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;

    .inp {
        // width: calc(100% - 119px - 52px);
        // width: auto;
        flex: 1;
        border: none;
        outline: none;
    }

    ::v-deep .but {
        width: 52px;
        height: 40px;
        background: #125ffb;
        border-radius: 0 5px 5px 0;
    }

    .dropdown {
        width: auto;
        font-size: 14px;
        display: flex;
        height: 40px;
        align-items: center;
        padding: 5px 10px;
        box-sizing: border-box;
        position: relative;
        z-index: 9999;

        .shu {
            width: 1px;
            height: 25px;
            background: #e6ebed;
        }

        .down {
            position: absolute;
            top: 41px;
            left: 3px;
            background: #fff;
            box-shadow: 0 0 5px 1px #f0f0f0;
            list-style: none;
            text-align: center;
            border-radius: 5px;
            box-sizing: border-box;
            display: none;

            li {
                padding: 10px;
                cursor: pointer;
            }

            li:hover {
                background: #f5f5f5;
            }
        }
    }

    .dropdown:hover {
        .icon {
            transform: rotate(180deg);
            transition: transform 0.2s ease-in-out;
        }

        .down {
            display: block;
        }
    }

    .a::placeholder {
        transform: translateY(0);
    }

    .b::placeholder {
        transform: translateY(-10px);
        transition: all 1s;
    }

}
</style>